import React from 'react';
import { withRouter } from 'react-router-dom';
import './Contents.css'
class Contents extends React.Component {

	constructor(props) {
	  super(props);
	  this.state = {
            confession:props.confession,
            userid:localStorage.getItem('userid'),
            
	  };
	}

    componentDidMount(){
        //获取用户的头像和昵称
        fetch(`https://www.prebeauty.work/user/${this.state.confession.userid}`,{
            method:'GET',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    this.setState({
                        confname:data[0].name,
                        confimg:data[0].image
                    })
                })
            }else {
                alert("出现一个问题");
            }
        })

        //获取用户是否喜欢
        fetch(`https://www.prebeauty.work/clike/${this.state.userid}&${this.state.confession.id}`,{
            method:'GET',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    this.setState({
                        dolike:data[0]?true:false
                    }) 
                    console.log(data)
                    console.log(this.state.dolike)
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

    tolike(){
        console.log('点赞')
        this.setState({
            dolike:true
        })
        this.state.confession.likesnum++

        //添加本条点赞
        fetch(`https://www.prebeauty.work/clike/${this.state.userid}&${this.state.confession.id}`,{
            method:'POST',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('clike 点赞！')
                })
            }else {
                alert("出现一个问题");
            }
        })

        const param={
            likesnum:this.state.confession.likesnum
        }

        //confession表中的likesnum+1
        fetch(`https://www.prebeauty.work/confession/${this.state.confession.id}`,{
            method:'PUT',
            body:JSON.stringify(param),
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('confession likesnum 点赞！')
                })
            }else {
                alert("出现一个问题");
            }
        })
    }
    
    dellike(){
        console.log('取消点赞')
        this.setState({
            dolike:false
        })
        this.state.confession.likesnum--

        //取消本条点赞
        fetch(`https://www.prebeauty.work/clike/${this.state.userid}&${this.state.confession.id}`,{
            method:'DELETE',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('clike 取消点赞！')
                })
            }else {
                alert("出现一个问题");
            }
        })

        const param={
            likesnum:this.state.confession.likesnum
        }
        //confession表中的likesnum-1
        fetch(`https://www.prebeauty.work/confession/${this.state.confession.id}`,{
            method:'PUT',
            body:JSON.stringify(param),
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('confession likesnum 取消点赞！')
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

    gotoDetails(){
        this.props.history.push(
            {
                pathname:'/Details',
                state:{
                    confession:this.state.confession
                }
            }
        )
    }
    
    render() {
        
        return (
            <div className="oneCon" key={this.state.confession.id}>
                <img className="userimg" src={this.state.confimg} />
                <p className="username">{this.state.confname}</p>
                <br/>
                <p className="content">{this.state.confession.hope}</p>
                <div style={{height:20}}></div>

                {
                    !this.state.dolike
                    ?
                    <i 
                        className="iconfont icon-aixin" 
                        style={{
                            color:'#FFAEB9',
                            position:'absolute',
                            bottom:'0px',
                            right:'30%'
                        }}
                        onClick={localStorage.getItem('token')?this.tolike.bind(this):()=>console.log('请先进行登录！')}
                    ></i>
                    :
                    <i className="iconfont icon-w_aixin" style={{color:'#FFAEB9',position:'absolute',bottom:'0px',right:'30%'}} onClick={localStorage.getItem('token')?this.dellike.bind(this):console.log('请先进行登录！')}></i>
                }
                <span style={{color:'#FFAEB9',position:'absolute',bottom:'0px',right:'26%'}}>{this.state.confession.likesnum}</span>
                <i 
                    className="iconfont icon-53pinglun-" 
                    style={{color:'#FFAEB9',position:'absolute',bottom:'0px',right:'18%'}} 
                    onClick={this.gotoDetails.bind(this)}
                ></i>
                <span style={{color:'#FFAEB9',position:'absolute',bottom:'0px',right:'14%'}}>{this.state.confession.remarksnum}</span>
                
            </div>
        );
    }    
}

export default withRouter(Contents);